<template>
	<!-- Main content -->
	<section class='content'>
		<div class="box box-default">
			<div class="box-header with-border form-inline">
				<button class="btn btn-warning" @click="add"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;新增黑名单</button>
				<button class="btn btn-danger"><span class="glyphicon glyphicon-upload"></span>&nbsp;批量导入黑名单</button>
			</div>

			<div class="box-body">
				<table class="table table-hover">
					<thead>
						<tr>
							<!--<th>用户ID</th>-->
							<th>姓名</th>
							<th>身份证号</th>
							<th>手机号</th>
							<th>来源</th>
							<th>入库时间</th>
							<th>管理操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in blackList">
							<!--<td>{{item['id']}}</td>-->
							<td>{{item['userCode']}}</td>
							<td>{{item['idNo']}}</td>
							<td>{{item['phone']}}</td>
							<td>{{item['source']}}</td>
							<td>{{item['createtime']}}</td>
							<td><a @click="del(item['id'])">删除</a></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="box-footer">
			</div>
		</div>
		<div class="layer_custom_container layer_add_container form-horizontal" style="display:none">
			<div class="box box-primary">
				<div class="box-body">
					<div class="row form-group">
						<div class="col-xs-3 control-label">姓名</div>
						<div class="col-xs-9"><input class="form-control" type="text" v-model="aBlacklist['userCode']"></div>
					</div>
					<div class="row form-group">
						<div class="col-xs-3 control-label">身份证号</div>
						<div class="col-xs-9"><input class="form-control" type="text" v-model="aBlacklist['idNo']"></div>
					</div>
					<div class="row form-group">
						<div class="col-xs-3 control-label">手机号</div>
						<div class="col-xs-9"><input class="form-control" type="text" v-model="aBlacklist['phone']"></div>
					</div>
					<div class="row form-group">
						<div class="col-xs-3 control-label">系统来源</div>
						<div class="col-xs-9"><input class="form-control" type="text" v-model="aBlacklist['source']"></div>
					</div>
				</div>

			</div>


		</div>
	</section>
	<!-- /.content -->
</template>

<script type="text/ecmascript-6">
	export default{
		data(){
			return {
				layer:{
					add:'',
				},
				blackList:[
				],
				aBlacklist:{
					name:'',
					idNo:'',
					phone:'',
					source:'系统内部'
				},

			}
		},
		methods:{
			add(){
				let vue=this;
				this.layer.add=layer.open({
					type: 1,
					area: ['400px','450px'],
					title: '新增',
					scrollbar: false,
					id: 'add',
					content:$('.layer_add_container'),
					btn:['取消','保存'],
					yes:function(){
						layer.close(vue.layer.add);
					},
					btn2:function(){
//						if(!vue.aBlacklist.name){
//							return;
//						}
//						if(!vue.aBlacklist.idNo){
//							return;
//						}
//						if(!vue.aBlacklist.phone){
//							return;
//						}
//						if(!vue.aBlacklist.userCode){
//							return;
//						}
//						if(!vue.aBlacklist.source){
//							return;
//						}
						vue.$store.dispatch('addBlacklist',{
							...vue.aBlacklist,
							userId:new Date().getTime().toString().substr(0,10) //非重复id，这里暂时用10位时间戳替代
						}).then(()=>{
							vue.fetchBlacklist();
							layer.close(vue.layer.add);
						})
						return false;
					}
				})
			},
			del(id){
				this.$store.dispatch('delBlacklist',{
					id:id
				}).then(()=>{
					this.fetchBlacklist();
				})
			},
			fetchBlacklist(){
				this.$store.dispatch('fetchBlacklist',{
				}).then((info)=>{
					this.blackList=info;
				})
			}
		},
		mounted(){
			this.fetchBlacklist();
			this.$nextTick(function () {
			})
		},
		beforeDestroy(){
			//用户使用输入路由跳页的时候
			layer.close(this.layer.add);
		}
	}
</script>
<style scoped>
	.info-box {
		cursor: pointer;
	}

	.info-box-content {
		text-align: center;
		vertical-align: middle;
		display: inherit;
	}

	.fullCanvas {
		width: 100%;
	}
	.layer_add_container .box{
		margin-bottom:0;
	}
</style>
